<template>
    <div>
      <!-- 数据列表 -->
      <ul style="border: 1px solid black;">
        <li v-for="item in paginatedItems" :key="item.id">
          {{ item.id }} ------- {{ item.name }} ------- {{ "$" + item.price.toFixed(2) }}
        </li>
      </ul>
  
      <!-- 分页导航 -->
      <nav>
        <ul class="pagination">
          <!-- 上一页按钮 -->
          <li :class="{ disabled: currentPage === 1 }" @click="changePage(currentPage - 1)">
            <a href="#">上一页</a>
          </li>
          <!-- 页码按钮 -->
          <li v-for="page in totalPages" :key="page" @click="changePage(page)">
            <a href="#" :class="{ active: page === currentPage }">{{ page }}</a>
          </li>
          <!-- 下一页按钮 -->
          <li :class="{ disabled: currentPage === totalPages }" @click="changePage(currentPage + 1)">
            <a href="#">下一页</a>
          </li>
        </ul>
      </nav>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        text: [
          { id: 1, name: '苹果', price: 5 },
          { id: 2, name: '香蕉', price: 3 },
          { id: 3, name: '橘子', price: 4 },
          { id: 4, name: '草莓', price: 4 },
          { id: 5, name: '西瓜', price: 2 },
          { id: 6, name: '柠檬', price: 3 },
        ],
        currentPage: 1, // 当前页码
        itemsPerPage: 2, // 每页显示的数据条数
      };
    },
    computed: {
      // 计算总页数
      totalPages() {
        return Math.ceil(this.text.length / this.itemsPerPage);
      },
      // 获取当前页的数据
      paginatedItems() {
        const start = (this.currentPage - 1) * this.itemsPerPage;
        const end = start + this.itemsPerPage;
        return this.text.slice(start, end);
      },
    },
    methods: {
      // 切换页码
      changePage(page) {
        if (page < 1 || page > this.totalPages) return;
        this.currentPage = page;
      },
    },
  };
  </script>
  
  <style scoped>
  .pagination {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  .pagination li {
    margin: 0 5px;
    cursor: pointer;
  }
  .pagination li a {
    text-decoration: none;
    color: #000;
  }
  .pagination li a.active {
    font-weight: bold;
    color: #007bff;
  }
  .pagination li.disabled {
    pointer-events: none;
    color: #ccc;
  }
  </style>